<template>
  <div>
    <TitleBack :title-name="value"/>
    <van-field v-model="userName" label="昵称" placeholder="请输入昵称"/>
    <van-field v-model="loginName" label="账号" placeholder="请输入账号"/>
    <!--    <van-field v-model="password" type="password" label="密码" placeholder="请输入密码"/>-->
    <van-field v-model="password" type="password" label="密码" placeholder="请输入密码"/>
    <van-field v-model="newpassword" type="password"  label="确认密码" placeholder="请输入密码"
               :error-message="errormessage" @input="confirmpassword"/>

    <van-radio-group v-model="sex" direction="horizontal" tag="div" class="sex">
      <span>性别</span>
      <van-radio name="0">男</van-radio>
      <van-radio name="1">女</van-radio>
    </van-radio-group>


    <van-field v-model="phonenumber" type="tel" label="手机号" placeholder="请输入手机号"/>
    <VerificationCode @getCode="GetCode" :phonenumber="phonenumber"/>
    <div style="margin: 16px;">
      <van-button round block type="danger" native-type="submit" @click="click">
        注 册
      </van-button>
    </div>
    <!--    <button type="submit" @click="click">提交</button>-->
  </div>
</template>

<script>
import TitleBack from "@/components/TitleBack";
import VerificationCode from "@/components/VerificationCode";
import {getRegistered} from "@/api/login-aip";
import {Dialog} from "vant";

export default {
  name: "Registered",
  data() {
    return {
      value: "注册",
      loginName: "",
      code: "",
      phonenumber: '',
      password: '',
      userName: '',
      sex: '',
      newpassword: '',
      errormessage: ""
    }
  },
  components: {
    TitleBack,
    VerificationCode,
    [Dialog.Component.name]: Dialog.Component,

  },
  methods: {
    confirmpassword() {
      if (this.password === this.newpassword) {
        this.errormessage = ''
      } else (
          this.errormessage = '密码不相同'
      )
    },
    GetCode(data) {
      this.code = data
      // console.log(this.code)
    },
    click() {
      if (this.loginName === "") {
        Dialog.alert({
          message: '账号不能为空',
        }).then(() => {
          // on close
        });
      } else {
        if (this.password === "") {
          Dialog.alert({
            message: '密码不能为空',
          }).then(() => {
            // on close
          });
        } else {
          if (this.phonenumber === "") {
            Dialog.alert({
              message: '请输入手机号码',
            }).then(() => {
              // on close
            });
          } else {
            if (this.code === "") {
              alert("请输入验证码")
              Dialog.alert({
                message: '请输入验证码',
              }).then(() => {
                // on close
              });
            } else {
              if (this.userName === "") {
                alert("请输入昵称")
                Dialog.alert({
                  message: '请输入昵称',
                }).then(() => {
                  // on close
                });
              } else {
                console.log(typeof this.loginName)
                getRegistered(this.loginName, this.code, this.phonenumber, this.password, this.userName, this.sex).then((res) => {
                  if (res.code === 0) {
                    Dialog.alert({
                      message: res.msg,
                    }).then(() => {
                      // on close
                    });
                    this.$router.go("/MyLogin")
                  } else {
                    Dialog.alert({
                      message: res.msg,
                    }).then(() => {
                      // on close
                    });
                  }
                })
              }
            }
          }
        }
      }

    }
  }
}
</script>

<style scoped lang="less">
.sex {
  margin: 10px 0px 10px 16px;

  span {
    font-size: 14px;
    color: #646566;;
    margin-right: 20px;
  }
}
</style>